<template>
  <view class="news-detail-container">
    <!-- 新闻标题区域 -->
    <view class="news-header">
      <view class="title-section">
        <text class="news-title">{{ currentNews.title }}</text>
        <view class="source-info">
          <image :src="getSourceIcon(currentNews.author)" class="source-icon"></image>
          <text class="source-name">{{ currentNews.author }}</text>
          <text class="publish-time">{{ currentNews.timedata || currentNews.publishTime }}</text>
        </view>
      </view>
    </view>

    <!-- 作者信息与关注 -->
    <view class="author-section">
      <view class="author-info">
        <image :src="getAuthorAvatar(currentNews.author)" class="author-avatar"></image>
        <view class="author-details">
          <text class="author-name">{{ currentNews.author }}</text>
          <text class="fans-count">粉丝: {{ authorStats.fansCount }}</text>
        </view>
      </view>
      
      <view class="follow-btn" @click="toggleFollow" :class="{ 'followed': isFollowed }">
        <text>{{ isFollowed ? '已关注' : '关注' }}</text>
      </view>
    </view>

    <!-- 新闻内容 -->
    <view class="news-content">
      <view class="content-text">
        <text v-for="(paragraph, index) in formatContent(currentNews.content)" :key="index" class="content-paragraph">
          {{ paragraph }}
        </text>
      </view>
      
      <!-- 图片展示 -->
      <view v-if="currentNews.imageList && currentNews.imageList.length > 0" class="content-images">
        <image 
          v-for="(img, index) in currentNews.imageList" 
          :key="index"
          :src="img" 
          mode="widthFix"
          class="content-image"
          @click="previewImage(index)"
        />
      </view>
    </view>

    <!-- 新闻操作栏 -->
    <view class="news-actions">
      <view class="action-item" @click="toggleLikeNews">
        <text class="action-icon">{{ newsLiked ? '❤️' : '🤍' }}</text>
        <text>点赞 {{ currentNews.likeCount || 0 }}</text>
      </view>
      <view class="action-item" @click="showCommentInput = true">
        <text class="action-icon">💬</text>
        <text>评论 {{ comments.length }}</text>
      </view>
      <view class="action-item" @click="shareNews">
        <text class="action-icon">↗️</text>
        <text>分享 {{ currentNews.shareCount || 0 }}</text>
      </view>
      <view class="action-item" @click="toggleCollect">
        <text class="action-icon">{{ isCollected ? '⭐' : '☆' }}</text>
        <text>收藏</text>
      </view>
    </view>

    <!-- 精彩推荐 -->
    <view class="recommend-section" v-if="recommendations.length > 0">
      <view class="section-title">精彩推荐</view>
      <scroll-view class="recommend-scroll" scroll-x>
        <view class="recommend-list">
          <view 
            v-for="item in recommendations" 
            :key="item.id"
            class="recommend-item"
            @click="goToRecommend(item.id)"
          >
            <text class="recommend-title">{{ item.title }}</text>
            <text class="recommend-author">{{ item.author }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 评论区域 -->
    <view class="comment-section">
      <view class="section-header">
        <text class="comment-title">评论</text>
        <text class="comment-count">{{ comments.length }}条</text>
      </view>
      
      <!-- 评论列表 - 空状态 -->
      <view v-if="comments.length === 0" class="empty-state">
        <text class="empty-icon">💬</text>
        <text class="empty-text">暂无评论，快来抢沙发～</text>
      </view>
      
      <view class="comment-list" v-else>
        <view 
          v-for="comment in comments" 
          :key="comment.id"
          class="comment-item"
        >
          <!-- 评论头像 -->
          <image class="comment-avatar" :src="getCommentAvatar(comment.username)"></image>
          
          <view class="comment-content">
            <view class="comment-header">
              <text class="comment-author">{{ comment.username }}</text>
              <!-- 评论用户城市 -->
              <text class="comment-city" v-if="comment.city">{{ comment.city }}</text>
              <text class="comment-time">{{ comment.timedata }}</text>
            </view>
            <text class="comment-text">{{ comment.content }}</text>
            <view class="comment-actions">
              <view class="like-action" @click="likeComment(comment.id)">
                <text class="like-icon">{{ comment.liked ? '❤️' : '🤍' }}</text>
                <text>{{ comment.likeCount || 0 }}</text>
              </view>
              <!-- 回复数显示 -->
              <view class="reply-action" v-if="comment.replyCount">
                <text class="reply-icon">💬</text>
                <text>{{ comment.replyCount }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 添加评论 -->
      <view class="add-comment" v-if="showCommentInput">
        <input 
          v-model="newComment" 
          placeholder="写下你的评论..." 
          class="comment-input"
          maxlength="200"
        />
        <view class="comment-actions">
          <text class="char-count">{{ newComment.length }}/200</text>
          <button @click="submitComment" class="submit-btn">发布</button>
          <button @click="showCommentInput = false" class="cancel-btn">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsId: null,
      currentNews: {},
      isFollowed: false,
      newsLiked: false,
      isCollected: false,
      authorStats: { fansCount: 0 },
      recommendations: [],
      comments: [], // 存储原始评论 + 新增评论
      newComment: '',
      showCommentInput: false,
      isLogin: false,
      app: null // 缓存App实例
    }
  },
  
  onLoad(options) {
    this.app = getApp();
    // 统一转为字符串，避免ID类型不匹配
    this.newsId = options.id ? String(options.id) : null;
    console.log('新闻详情页接收ID:', this.newsId, '原始参数:', options);
    
    // 检查登录状态
    this.isLogin = !!this.app.globalData.userInfo;
    // 加载新闻详情
    this.loadNewsDetail().then(() => {
      // 加载用户行为状态（点赞/收藏/关注）
      this.loadUserActionState();
      // 记录浏览历史
      this.app.recordView?.(this.newsId, this.currentNews);
    });
  },
  
  onShow() {
    // 监听登录状态变化
    const isNowLogin = !!this.app.globalData.userInfo;
    if (!this.isLogin && isNowLogin) {
      this.isLogin = true;
      this.loadUserActionState();
    }
  },
  
  methods: {
    // 格式化内容：兼容数组（JSON里的格式）和字符串两种情况
    formatContent(content) {
      if (!content) return [];
      // 如果是数组直接返回，否则按换行分割
      return Array.isArray(content) 
        ? content.filter(para => para.trim()) 
        : content.split('\n').filter(para => para.trim());
    },
    
    // 加载新闻详情（强化ID匹配+修复数据读取）
    async loadNewsDetail() {
      try {
        // 优先从全局数据获取，兜底从缓存获取
        const newsData = this.app?.globalData?.newsData || uni.getStorageSync('newsData');
        console.log('当前新闻数据:', newsData);
        
        if (!newsData || !newsData.newsDetails) {
          uni.showToast({ title: '新闻数据未加载', icon: 'none' });
          setTimeout(() => uni.navigateBack(), 1500);
          return;
        }

        // 强制转为字符串ID匹配（核心修复：统一ID类型）
        const targetNewsId = String(this.newsId);
        let targetNews = newsData.newsDetails[targetNewsId];

        // 兜底逻辑：如果找不到对应ID，加载第一个新闻
        if (!targetNews) {
          console.warn(`未找到ID为${this.newsId}的新闻，加载第一个新闻`);
          const firstNewsId = Object.keys(newsData.newsDetails)[0];
          targetNews = newsData.newsDetails[firstNewsId];
          this.newsId = firstNewsId;
        }

        if (targetNews) {
          this.currentNews = {
            // 兜底所有必要字段，避免undefined
            likeCount: 0,
            shareCount: 0,
            imageList: [],
            ...targetNews
          };
          // 深拷贝评论列表，避免修改原数据
          this.comments = targetNews.comments && Array.isArray(targetNews.comments) 
            ? JSON.parse(JSON.stringify(targetNews.comments)) 
            : [];
          this.loadRecommendations();
          this.loadAuthorStats();
          console.log('新闻加载成功:', this.currentNews);
        } else {
          // 最终兜底：无任何新闻数据时返回
          console.error('无可用新闻数据');
          uni.showToast({ title: '新闻不存在', icon: 'none' });
          setTimeout(() => uni.navigateBack(), 1500);
        }
      } catch (e) {
        console.error('加载新闻详情失败:', e);
        uni.showToast({ title: '加载失败', icon: 'none' });
        setTimeout(() => uni.navigateBack(), 1500);
      }
    },
    
    // 加载用户行为状态（点赞/收藏/关注）
    loadUserActionState() {
      if (!this.isLogin || !this.newsId || !this.currentNews.author) return;
      
      // 点赞状态
      this.newsLiked = this.app?.isLiked?.(this.newsId) || false;
      // 收藏状态
      this.isCollected = this.app?.isCollected?.(this.newsId) || false;
      // 关注状态
      this.isFollowed = this.app?.isFollowed?.(this.currentNews.author) || false;
      
      // 兼容：合并App层额外评论
      const appComments = this.app?.getComments?.(this.newsId) || [];
      if (appComments.length > 0 && this.comments.length === 0) {
        this.comments = [...appComments];
      }
      
      // 更新新闻点赞数
      if (this.newsLiked) {
        this.currentNews.likeCount = (this.currentNews.likeCount || 0) + 1;
      }
    },
    
    // 加载推荐新闻
    loadRecommendations() {
      this.recommendations = this.currentNews.recommendNews && Array.isArray(this.currentNews.recommendNews) 
        ? this.currentNews.recommendNews 
        : (this.currentNews.recommend || []); // 兼容videoData里的recommend字段
    },
    
    // 加载作者统计
    loadAuthorStats() {
      this.authorStats.fansCount = Math.floor(Math.random() * 10000) + 1000;
      // 如果已关注，粉丝数+1
      if (this.isFollowed) {
        this.authorStats.fansCount += 1;
      }
    },
    
    // 登录校验
    checkLogin() {
      if (!this.isLogin) {
        uni.showModal({
          title: '提示',
          content: '请先登录后再进行操作',
          confirmText: '去登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/tabBar/tabcompage/login/login' });
            }
          }
        });
        return false;
      }
      return true;
    },
    
    // 切换关注状态
    toggleFollow() {
      if (!this.checkLogin()) return;
      if (!this.currentNews.author) return;
      
      if (this.isFollowed) {
        // 取消关注
        this.app?.cancelFollow?.(this.currentNews.author);
        this.isFollowed = false;
        this.authorStats.fansCount = Math.max(0, this.authorStats.fansCount - 1);
        uni.showToast({ title: '已取消关注', icon: 'success' });
      } else {
        // 关注
        this.app?.followAuthor?.(this.currentNews.author);
        this.isFollowed = true;
        this.authorStats.fansCount += 1;
        uni.showToast({ title: '关注成功', icon: 'success' });
      }
    },
    
    // 切换点赞状态
    toggleLikeNews() {
      if (!this.checkLogin()) return;
      if (!this.newsId) return;
      
      if (this.newsLiked) {
        // 取消点赞
        this.app?.cancelLike?.(this.newsId);
        this.newsLiked = false;
        this.currentNews.likeCount = Math.max(0, (this.currentNews.likeCount || 0) - 1);
        uni.showToast({ title: '已取消点赞', icon: 'success' });
      } else {
        // 点赞
        this.app?.likeNews?.(this.newsId);
        this.newsLiked = true;
        this.currentNews.likeCount = (this.currentNews.likeCount || 0) + 1;
        uni.showToast({ title: '点赞成功', icon: 'success' });
      }
    },
    
    // 切换收藏状态
    toggleCollect() {
      if (!this.checkLogin()) return;
      if (!this.newsId) return;
      
      if (this.isCollected) {
        // 取消收藏
        this.app?.cancelCollect?.(this.newsId);
        this.isCollected = false;
        uni.showToast({ title: '已取消收藏', icon: 'success' });
      } else {
        // 收藏
        this.app?.collectNews?.(this.newsId);
        this.isCollected = true;
        uni.showToast({ title: '收藏成功', icon: 'success' });
      }
    },
    
    // 点赞评论
    likeComment(commentId) {
      if (!this.checkLogin()) return;
      if (!this.newsId || !commentId) return;
      
      // 找到对应评论并切换点赞状态
      const commentIndex = this.comments.findIndex(item => item.id === commentId);
      if (commentIndex > -1) {
        const isLiked = this.comments[commentIndex].liked;
        // 更新点赞状态和数量
        this.comments[commentIndex].liked = !isLiked;
        this.comments[commentIndex].likeCount = isLiked 
          ? Math.max(0, (this.comments[commentIndex].likeCount || 0) - 1)
          : (this.comments[commentIndex].likeCount || 0) + 1;
        
        // 同步到App层
        this.app?.likeComment?.(this.newsId, commentId);
        uni.showToast({ title: isLiked ? '已取消点赞' : '点赞成功', icon: 'success' });
      }
    },
    
    // 提交评论
    submitComment() {
      if (!this.checkLogin()) return;
      
      const content = this.newComment.trim();
      if (!content) {
        uni.showToast({ title: '评论内容不能为空', icon: 'none' });
        return;
      }
      
      // 构造新评论数据
      const newCommentObj = {
        id: Date.now(), // 时间戳作为唯一ID
        username: this.app.globalData.userInfo?.username || '匿名用户',
        city: this.app.globalData.userInfo?.city || '未知城市',
        timedata: this.formatCurrentTime(),
        content: content,
        likeCount: 0,
        replyCount: 0,
        liked: false
      };
      
      // 新增评论添加到列表头部
      this.comments.unshift(newCommentObj);
      // 同步到App层
      this.app?.addComment?.(this.newsId, newCommentObj);
      
      this.newComment = '';
      this.showCommentInput = false;
      uni.showToast({ title: '评论发布成功', icon: 'success' });
    },
    
    // 格式化当前时间
    formatCurrentTime() {
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    
    // 获取评论用户头像
    getCommentAvatar(username) {
      const avatarMap = {
        '网友小夏': '/static/avatar1.png',
        '啤酒爱好者': '/static/avatar2.png',
        '消费者小李': '/static/avatar3.png',
        '商家从业者': '/static/avatar4.png',
        '经济观察员': '/static/avatar5.png',
        '党员干部': '/static/avatar6.png',
        '国际观察': '/static/avatar7.png',
        '桂林市民': '/static/avatar8.png',
        '汽车爱好者': '/static/avatar1.png',
        '财经评论员': '/static/avatar2.png',
        '网友872503': '/static/avatar3.png'
      };
      return avatarMap[username] || '/static/default-avatar.png';
    },
    
    // 获取来源图标
    getSourceIcon(author) {
      if (!author) return '/static/tx.jpg';
      const iconMap = {
        '界面新闻': '/static/tx1.jpg',
        '常规报': '/static/tx2.jpg',
        '央视新闻': '/static/tx5.jpg',
        '人民日报': '/static/tx3.jpg',
        '新华日报': '/static/tx4.jpg',
        '桂林日报': '/static/tx6.jpg',
        '财经日报': '/static/tx1.jpg',
        '健康时报': '/static/tx2.jpg',
        '科技日报': '/static/tx3.jpg'
      };
      return iconMap[author] || '/static/tx.jpg';
    },
    
    // 获取作者头像
    getAuthorAvatar(author) {
      if (!author) return '/static/tx.jpg';
      const avatarMap = {
        '界面新闻': '/static/tx1.jpg',
        '常规报': '/static/tx2.jpg',
        '央视新闻': '/static/tx5.jpg',
        '人民日报': '/static/tx3.jpg',
        '新华日报': '/static/tx4.jpg',
        '桂林日报': '/static/tx6.jpg',
        '财经日报': '/static/tx1.jpg',
        '健康时报': '/static/tx2.jpg',
        '科技日报': '/static/tx3.jpg'
      };
      return avatarMap[author] || '/static/tx.jpg';
    },
    
    // 预览图片
    previewImage(index) {
      if (!this.currentNews.imageList || !Array.isArray(this.currentNews.imageList)) return;
      const urls = this.currentNews.imageList;
      uni.previewImage({
        current: index,
        urls: urls
      });
    },
    
    // 跳转推荐新闻
    goToRecommend(newsId) {
      if (!newsId) return;
      uni.navigateTo({
        url: `/pages/news-detail/news-detail?id=${newsId}`
      });
    },
    
    // 分享新闻
    shareNews() {
      this.app?.shareNews?.(this.newsId);
      this.currentNews.shareCount = (this.currentNews.shareCount || 0) + 1;
    }
  }
};
</script>

<style scoped>
/* 容器和布局样式 */
.news-detail-container {
  background: #ffffff;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 通用布局类 */
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 新闻头部区域样式 */
.news-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.title-section {
  margin-bottom: 20rpx;
}

.news-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.5;
  display: block;
  margin-bottom: 20rpx;
  text-align: justify;
  letter-spacing: 0.5rpx;
}

.source-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex-wrap: wrap;
}

.source-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 1rpx solid #e0e0e0;
}

.source-name {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.publish-time {
  font-size: 24rpx;
  color: #999;
  background: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

/* 作者信息区域样式 */
.author-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 50%);
  border-bottom: 1rpx solid #e8e8e8;
  margin: 0 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
  margin-top: 20rpx;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex: 1;
}

.author-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 2rpx solid #007AFF;
  background: linear-gradient(45deg, #007AFF, #00C6FF);
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.author-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.fans-count {
  font-size: 22rpx;
  color: #999;
  background: #f0f0f0;
  padding: 2rpx 8rpx;
  border-radius: 8rpx;
  align-self: flex-start;
}

.follow-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  border: 1rpx solid #007AFF;
  border-radius: 25rpx;
  font-size: 24rpx;
  color: #007AFF;
  background: rgba(0, 122, 255, 0.1);
  transition: all 0.3s ease;
  min-width: 100rpx;
  justify-content: center;
}

.follow-btn.followed {
  background: #007AFF;
  color: white;
  border-color: #007AFF;
}

.follow-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* 新闻内容区域样式 */
.news-content {
  padding: 30rpx;
  background: #ffffff;
}

.content-text {
  margin-bottom: 40rpx;
  line-height: 1.8;
}

.content-paragraph {
  display: block;
  font-size: 30rpx;
  color: #333;
  line-height: 1.8;
  margin-bottom: 30rpx;
  text-align: justify;
  text-indent: 2em;
  letter-spacing: 0.5rpx;
}

.content-images {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin: 30rpx 0;
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 12rpx;
}

.content-image {
  width: 100%;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.content-image:active {
  transform: scale(0.98);
}

/* 新闻操作栏样式 */
.news-actions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 25rpx 30rpx;
  background: #f8f9fa;
  border-radius: 20rpx;
  margin: 30rpx 0;
  border: 1rpx solid #e8e8e8;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 15rpx 20rpx;
  border-radius: 15rpx;
  transition: all 0.3s ease;
  min-width: 120rpx;
}

.action-item:active {
  background: rgba(0, 122, 255, 0.1);
  transform: scale(0.95);
}

.action-icon {
  font-size: 36rpx;
  margin-bottom: 5rpx;
}

.action-item text:last-child {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}

/* 推荐区域样式 */
.recommend-section {
  padding: 30rpx;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-top: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 25rpx;
  padding-left: 15rpx;
  border-left: 6rpx solid #007AFF;
  background: linear-gradient(90deg, rgba(0,122,255,0.1), transparent);
  padding: 15rpx 20rpx;
  border-radius: 8rpx;
}

.recommend-scroll {
  white-space: nowrap;
  padding: 10rpx 0;
}

.recommend-list {
  display: inline-flex;
  gap: 20rpx;
  padding: 0 10rpx;
}

.recommend-item {
  display: inline-flex;
  flex-direction: column;
  width: 280rpx;
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  border: 1rpx solid #f0f0f0;
  transition: all 0.3s ease;
}

.recommend-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.12);
}

.recommend-title {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.recommend-author {
  font-size: 22rpx;
  color: #999;
  align-self: flex-end;
}

/* 评论区域样式 */
.comment-section {
  padding: 30rpx;
  background: #ffffff;
  border-top: 1rpx solid #f0f0f0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
  padding-bottom: 15rpx;
  border-bottom: 2rpx solid #007AFF;
}

.comment-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.comment-count {
  font-size: 26rpx;
  color: #666;
  background: #f0f0f0;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
}

/* 评论空状态样式 */
.empty-state {
  text-align: center;
  padding: 60rpx 30rpx;
  color: #999;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
}

.comment-list {
  margin-bottom: 30rpx;
}

.comment-item {
  display: flex;
  gap: 20rpx;
  margin-bottom: 25rpx;
  padding: 25rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 1rpx solid #e8e8e8;
  transition: all 0.3s ease;
}

.comment-item:active {
  background: #f0f0f0;
  transform: scale(0.99);
}

/* 评论头像样式 */
.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: linear-gradient(45deg, #007AFF, #00C6FF);
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
  flex-wrap: wrap;
  gap: 10rpx;
}

.comment-author {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
}

/* 评论城市样式 */
.comment-city {
  font-size: 22rpx;
  color: #999;
  background: #f0f0f0;
  padding: 2rpx 8rpx;
  border-radius: 8rpx;
}

.comment-time {
  font-size: 22rpx;
  color: #999;
}

.comment-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  word-break: break-all;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 25rpx;
  margin-top: 10rpx;
}

.like-action {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 22rpx;
  color: #666;
  padding: 6rpx 12rpx;
  border-radius: 15rpx;
  background: rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}

.like-action:active {
  background: rgba(0,0,0,0.08);
}

/* 回复数样式 */
.reply-action {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 22rpx;
  color: #666;
  padding: 6rpx 12rpx;
  border-radius: 15rpx;
  background: rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}

.reply-icon {
  font-size: 20rpx;
}

/* 添加评论区域样式 */
.add-comment {
  background: #f8f9fa;
  border-radius: 20rpx;
  padding: 25rpx;
  margin-top: 20rpx;
  border: 1rpx solid #e8e8e8;
}

.comment-input {
  width: 100%;
  min-height: 80rpx;
  background: white;
  border: 1rpx solid #e0e0e0;
  border-radius: 15rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  transition: all 0.3s ease;
}

.comment-input:focus {
  border-color: #007AFF;
  box-shadow: 0 0 0 3rpx rgba(0, 122, 255, 0.1);
}

.comment-input::placeholder {
  color: #999;
}

.char-count {
  font-size: 22rpx;
  color: #999;
  flex: 1;
}

.submit-btn, .cancel-btn {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  border: none;
  transition: all 0.3s ease;
  min-width: 120rpx;
}

.submit-btn {
  background: #007AFF;
  color: white;
}

.submit-btn:active {
  background: #0056cc;
  transform: scale(0.95);
}

.cancel-btn {
  background: #f0f0f0;
  color: #666;
}

.cancel-btn:active {
  background: #e0e0e0;
  transform: scale(0.95);
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .news-header {
    padding: 25rpx 20rpx;
  }
  
  .news-title {
    font-size: 34rpx;
  }
  
  .author-section {
    margin: 15rpx;
    padding: 20rpx;
  }
  
  .news-content {
    padding: 25rpx 20rpx;
  }
  
  .content-paragraph {
    font-size: 29rpx;
  }
  
  .news-actions {
    padding: 20rpx;
    margin: 25rpx 15rpx;
  }
  
  .action-item {
    min-width: 110rpx;
    padding: 12rpx 15rpx;
  }
  
  .recommend-section,
  .comment-section {
    padding: 25rpx 20rpx;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .news-detail-container {
    background: #1a1a1a;
    color: #ffffff;
  }
  
  .news-header {
    background: #2a2a2a;
    border-bottom-color: #333;
  }
  
  .news-title {
    color: #ffffff;
  }
  
  .author-section {
    background: #2a2a2a;
    border-color: #333;
  }
  
  .author-name {
    color: #ffffff;
  }
  
  .content-paragraph {
    color: #e0e0e0;
  }
  
  .comment-item {
    background: #2a2a2a;
    border-color: #333;
  }
  
  .comment-text {
    color: #e0e0e0;
  }
}
</style>